xlsx

2023-10-15 06:57| 来源: 网络整理| 查看: 265

xlsx-style使用(导出表格及修改单元格样式)

针对导出表格需要与xlsx配合使用,通过xlsx的方法生成sheet对象然后在对象上修改样式

本文对xlsx-style 如何修改单元格样式做了一个大致对介绍,其中前半段对常用的一些属性对官方文档做了一个简单的翻译,希望可以耐心看完,在看后边代码就都懂了

安装 npm install xlsx-style --save

vue安装后导入可能会报错 Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx 这里附一个解决方案xlsx-style报错

编写工作簿(Writing Workbooks) /* 文件类型 bookType 可以是 'xlsx' or 'xlsm' or 'xlsb' */ var wopts = { bookType:'xlsx', bookSST:false, type:'binary' }; var wbout = XLSX.write(workbook,wopts); function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } /* the saveAs call downloads a file on the local machine */ saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx") 单元格对象(Cell Object)

可以使用单元格对象来实现对单元格样式对修改,最终导出是一定要使用xlsx-style的方法导出

key简介v原始值（有关更多信息，请参见“数据类型”部分）w格式化文本（如果适用)t单元格类型：b布尔值，n数字，e错误，s字符串，d日期f单元格公式（如果适用）r富文本编码（如果适用）h富文本格式的HTML呈现（如果适用）c与单元格相关的评论**z与单元格关联的数字格式字符串（如果要求）l单元超链接对象（.Target包含链接，.tooltip为工具提示）s单元格的样式/主题（如果适用） //利用xlsxjs获取sheet对象,datalist为格式化好的导出的数据 var ws = XLSX.utils.json_to_sheet(dataList) ws['!cols'] = colsconfig //设置列属性,这里后面会讲到,可以修改列的相关属性,例如宽度 Object.keys(ws).forEach((key) => {//这里遍历单元格给单元格对象设置属性,s为控制样式的属性 if (key.indexOf('!') alignment: {//对齐方式 horizontal: 'center',//水平居中 vertical: 'center',//竖直居中 wrapText: true,//自动换行 }, } } }) 单元格样式(Cell Styles)

单元格样式即上边代码中的ws[key].s对象下边对应的属性,像alignment对应对齐方式,其他属性查看官方文档即可,这里不再赘述(官方文档搜索cell styles 直达)

工作表对象(Worksheet Object) 这里只介绍几个常用的工作表键,其余请参阅官方文档中 Worksheet Object 相关介绍

每个不以！开头的键！映射到单元格（使用A-1表示法） worksheet [address]返回指定地址的单元格对象 (这就是上边代码中获取单元格对象的方法) 特殊的工作表键（可作为worksheet[key]访问，每个键都以！开头）：

ws[’!ref’]:基于A-1的范围代表工作表范围。与图纸一起使用的功能应使用此参数来确定范围。分配超出范围的单元格将不被处理。特别是，当手动编写工作表时，请确保更新范围。有关更长的讨论，请参见http://git.io/KIaNKQws[’!cols’]:列属性对象的数组。列宽实际上是以规范化的方式存储在文件中的，以“最大位数宽度”（呈示的数字0-9的最大宽度，以像素为单位）衡量。解析后，列对象将像素宽度存储在wpx字段中，将字符宽度存储在wch字段中，并将最大数字宽度存储在MDW字段中。(注意:这里的wpx字段与wch字段即为修改列宽度的属性) //结合上文代码中的ws['!cols'] = colsconfig来看 //这里即colsconfig定义的地方,其中wch为列宽度单位,一个字符为两个字节,20则为10个字符宽度 //设置列宽度[{wch:20}] const colsconfig = [] Object.keys(keyMap).forEach(key=>{ colsconfig.push({ wch:20 }) }) ws['!cols'] = colsconfig ws[’!merges’]:与工作表中合并单元格相对应的范围对象数组。明文实用程序不知道合并单元格。CSV导出将写入合并范围内的所有单元格（如果存在），因此请确保仅设置范围内的第一个单元格（左上角）。 //合并单元格这里指定列合并单元格的范围,与列宽度设置类似也是一个数组 let excelMerges = [] excelMerges.push( { s: {r: 0, c: 0}, e: {r: 0, c: 2} } ); ws['!merges'] = excelMerges

其中push进去的对象的具体内容请参考官方文档中 General Structures相关介绍

附上完整代码,因为是项目中的代码,所以做了简化,大致理解流程就可以 import XLSX from 'xlsx' import XLSXStyle from 'xlsx-style' import XLSX_SAVE from 'file-saver' //设置列宽度[{wch:20}] const colsconfig = [] Object.keys(keyMap).forEach(key=>{ colsconfig.push({ wch:20 }) }) let arrangeInfo = this.getArrangeInfo //组装数据这是我的数据解析过程,自己的用自己的就好 const dataList = arrangeInfo.map((order) => { return Object.keys(keyMap).reduce((total, key) => { const title = getTitleList(key).join('\n') // key = key1,key2,key3... // keyList 表头对应的字段数组 const keyList = keyMap[key] const cell = keyList.reduce((v, c) => { // v 汇总字符串 c 数据字段 let val = order[c] || '' if (fieldMathod[c]) { val = fieldMathod[c](val) || '' } v += '\n' + val return v.trim() //去除前后空字符串 }, '') total[title] = cell return total }, {}) }) //设置excel属性 var wb = { SheetNames: ['导出表格'], Sheets: {}, Props: {}, } var ws = XLSX.utils.json_to_sheet(dataList) ws['!cols'] = colsconfig //设置列属性 Object.keys(ws).forEach((key) => {//设置单元格属性 if (key.indexOf('!') alignment: { horizontal: 'center', vertical: 'center', wrapText: true, }, } } }) // ws["!merges"] = excelMerges; wb.Sheets['导出表格'] = ws const wbout = XLSXStyle.write(wb, { type: 'binary', bookType: 'xlsx', }) XLSX_SAVE.saveAs( new Blob([this.s2ab(wbout)], { type: 'application/octet-stream', }), '导出表格.xlsx' ) },

【本文地址】

xlsx

xlsx

今日新闻

推荐新闻